<template>
  <div class="container">
    <Breadcrumb :items="['menu.survey', 'menu.survey.searchTable']" />
    <a-card class="general-card" :title="$t('menu.survey.searchTable')">
      <a-row>
        <a-col :flex="1">
          <a-form
            :model="formModel"
            :label-col-props="{ span: 6 }"
            :wrapper-col-props="{ span: 18 }"
            label-align="left"
          >
            <a-row :gutter="16">
              <a-col :span="8">
                <a-form-item field="name" label="问卷名称">
                  <a-input
                    v-model="formModel.name"
                    placeholder="请输入问卷名称……"
                  />
                </a-form-item>
              </a-col>
              <!--<a-col :span="8">-->
              <!--  <a-form-item field="name" :label="$t('searchTable.form.name')">-->
              <!--    <a-input-->
              <!--      v-model="formModel.name"-->
              <!--      :placeholder="$t('searchTable.form.name.placeholder')"-->
              <!--    />-->
              <!--  </a-form-item>-->
              <!--</a-col>-->
              <!--<a-col :span="8">-->
              <!--  <a-form-item-->
              <!--    field="contentType"-->
              <!--    :label="$t('searchTable.form.contentType')"-->
              <!--  >-->
              <!--    <a-select-->
              <!--      v-model="formModel.contentType"-->
              <!--      :options="contentTypeOptions"-->
              <!--      :placeholder="$t('searchTable.form.selectDefault')"-->
              <!--    />-->
              <!--  </a-form-item>-->
              <!--</a-col>-->
              <!--<a-col :span="8">-->
              <!--  <a-form-item-->
              <!--    field="filterType"-->
              <!--    :label="$t('searchTable.form.filterType')"-->
              <!--  >-->
              <!--    <a-select-->
              <!--      v-model="formModel.filterType"-->
              <!--      :options="filterTypeOptions"-->
              <!--      :placeholder="$t('searchTable.form.selectDefault')"-->
              <!--    />-->
              <!--  </a-form-item>-->
              <!--</a-col>-->
              <!--<a-col :span="8">-->
              <!--  <a-form-item-->
              <!--    field="createdTime"-->
              <!--    :label="$t('searchTable.form.createdTime')"-->
              <!--  >-->
              <!--    <a-range-picker-->
              <!--      v-model="formModel.createdTime"-->
              <!--      style="width: 100%"-->
              <!--    />-->
              <!--  </a-form-item>-->
              <!--</a-col>-->
              <a-col :span="8">
                <a-form-item field="status" label="问卷状态">
                  <a-select
                    v-model="formModel.status"
                    :options="statusOptions"
                    placeholder="全部"
                  />
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </a-col>

        <a-divider style="height: 42px" direction="vertical" />

        <a-col :flex="'192px'" style="text-align: right">
          <a-space direction="horizontal" :size="18">
            <a-button type="primary" @click="search">
              <template #icon>
                <icon-search />
              </template>
              {{ $t('searchTable.form.search') }}
            </a-button>
            <a-button @click="reset">
              <template #icon>
                <icon-refresh />
              </template>
              {{ $t('searchTable.form.reset') }}
            </a-button>
          </a-space>
        </a-col>
      </a-row>
      <a-divider style="margin-top: 0" />
      <!--新增和导入-->
      <!-- <a-row style="margin-bottom: 16px">
        <a-col :span="16">
          <a-space>
            <a-button type="primary">
              <template #icon>
                <icon-plus />
              </template>
              {{ $t('searchTable.operation.create') }}
            </a-button>
            <a-upload action="/">
              <template #upload-button>
                <a-button>
                  {{ $t('searchTable.operation.import') }}
                </a-button>
              </template>
            </a-upload>
          </a-space>
        </a-col>
        
        <a-col :span="8" style="text-align: right">
          <a-button>
            <template #icon>
              <icon-download />
            </template>
            {{ $t('searchTable.operation.download') }}
          </a-button>
        </a-col>
      </a-row> -->
      <!--这是展示的地方-->
      <a-table
        row-key="id"
        :loading="loading"
        :pagination="pagination"
        :data="renderData"
        :bordered="false"
        @page-change="onPageChange"
      >
        <template #columns>
          <a-table-column title="问卷编号" data-index="id" />
          <a-table-column title="问卷名" data-index="name" />
          <!-- <a-table-column title="问卷描述" data-index="description">
          </a-table-column> -->
          <a-table-column title="问卷拥有者" data-index="managedBy">
            <!--<template #cell="{ record }">-->
            <!--  {{ $t(`searchTable.form.filterType.${record.filterType}`) }}-->
            <!--</template>-->
          </a-table-column>
          <!-- <a-table-column title="开始时间" data-index="startTime" />
          <a-table-column title="结束时间" data-index="endTime" /> -->
          <a-table-column title="答卷上限" data-index="answerLimit">
            <!--<template #cell="{ record }">-->
            <!--  <span v-if="record.status === 'offline'" class="circle"></span>-->
            <!--  <span v-else class="circle pass"></span>-->
            <!--  {{ $t(`searchTable.form.status.${record.status}`) }}-->
            <!--</template>-->
          </a-table-column>
          <a-table-column title="状态" data-index="reserved">
            <template #cell="record">
              <!-- <a-button @click="here(record)">123213</a-button> -->
              <a-switch
                :default-checked="record.record.reserved"
                @change="here(record)"
              />
            </template>
          </a-table-column>
          <a-table-column title="操作" data-index="operations">
            <template #cell="record">
              <a-button
                type="text"
                status="success"
                size="small"
                @click="preview(record)"
              >
                预览
              </a-button>
              <a-button
                type="text"
                status="warning"
                size="small"
                @click="modifyQ(record)"
              >
                修改
              </a-button>
              <a-button
                type="text"
                status="warning"
                size="small"
                @click="analys(record)"
              >
                分析
              </a-button>
              <a-button
                type="text"
                status="danger"
                size="small"
                @click="deleteS(record)"
              >
                删除
              </a-button>

              <a-popover position="bottom" trigger="click">
                <a-button
                  type="outline"
                  status="success"
                  size="small"
                  @click="act(record)"
                >
                  发布
                </a-button>
                <template #content>
                  <!-- <p>Here is the text content</p>
                  <p>Here is the text content</p> -->
                  <a-input
                    v-model="copyId"
                    style="width: 400px; margin-right: 10px"
                    readonly="true"
                  />
                  <a-button
                    type="outline"
                    status="danger"
                    @click="release(record)"
                    >复制</a-button
                  >
                </template>
              </a-popover>
            </template>
          </a-table-column>
        </template>
      </a-table>
    </a-card>
    <modify-survey
      v-if="modifyVisible"
      v-model:visible="modifyVisible"
      :dialog-table-value="dialogTableValue"
      @fetchData="fetchData"
    ></modify-survey>
  </div>
</template>

<script lang="ts" setup>
  import { useSurveyStore } from '@/store';
  import { computed, ref, reactive } from 'vue';
  import { useI18n } from 'vue-i18n';
  import {
    deleteQuestion,
    previewsurvey,
    surveyList,
    PolicyRecord,
    PolicyParams,
    deleteSurvey,
    surveyStatics,
    modifySurvey as ms,
  } from '@/api/list';

  import useLoading from '@/hooks/loading';

  import { Pagination } from '@/types/global';
  import type { SelectOptionData } from '@arco-design/web-vue/es/select/interface';
  import { Message } from '@arco-design/web-vue';
  import router from '@/router';
  import questionDataSurveyStore from '@/store/modules/data-screen';
  import modifySurvey from './modifySurvey.vue';
  import previewSurvey from './preview/previewSurvey.vue';
  // eslint-disable-next-line no-redeclare

  const questionData = questionDataSurveyStore();

  // 解析不了

  // 查询往后传的东西
  const toBack = () => {
    return {
      survey_title: '',
      survey_state: '',
    };
  };
  const here = async (record) => {
    if (record.record.reserved === null) {
      record.record.reserved = '1';
    } else {
      record.record.reserved = null;
    }
    await ms(record.record);
    Message.success('修改成功！');
  };
  //
  // const previewVisible = ref(false);
  // const dialogTableValue = ref();
  // 展示的东西
  const modifyVisible = ref(false);
  const dialogTableValue = ref({});
  const generateFormModel = () => {
    return {
      number: '',
      name: '',
      description: '',
      startTime: '',
      endTime: '',
      status: '',
    };
  };
  const { loading, setLoading } = useLoading(true);
  const { t } = useI18n();
  const renderData = ref<PolicyRecord[]>([]);
  const formModel = ref(generateFormModel());
  const basePagination: Pagination = {
    page: 1,
    limit: 20,
  };
  const pagination = reactive({
    ...basePagination,
  });

  const fetchData = async (
    params = {
      page: 1,
      limit: 20,
      name: formModel.value.name,
      isDeleted: '0',
    }
  ) => {
    setLoading(true);
    try {
      const { data } = await surveyList(params);
      renderData.value = data.list;
      pagination.page = params.page;
      pagination.total = data.total;
    } catch (err) {
      // you can report use errorHandler or other
    } finally {
      setLoading(false);
    }
  };

  const search = () => {
    fetchData({
      ...basePagination,
      ...formModel.value,
    } as unknown as PolicyParams);
  };
  const onPageChange = (page: number) => {
    fetchData({ ...basePagination, page });
  };

  fetchData();
  const reset = () => {
    formModel.value = generateFormModel();
  };
  const modifyQ = (data) => {
    modifyVisible.value = true;
    console.log(data.record);
    dialogTableValue.value = JSON.parse(JSON.stringify(data.record));
    console.log(`zheli${dialogTableValue.value}`);
  };

  const deleteS = async (record) => {
    // console.log(record.id);
    await deleteSurvey([record.record.id]);
    fetchData();
  };

  const analys = async (record) => {
    // const param = {id:record.record.id};
    const { data } = await surveyStatics(record.record.id);
    console.log('data.heatmap.heatmap');
    console.log(data.heatmap);
    console.log('data.heatmap.heatmap');
    // eslint-disable-next-line prefer-destructuring
    questionData.questions = data.questions;
    questionData.heatmap = data.heatmap;
    // console.log("questionData.questions[0].stem")
    // console.log(questionData.questions[0].stem)
    // console.log("questionData.questions[0].stem")

    // 佳驰的跳转
    router.push({
      name: 'ChooseType',
    });
  };
  // 预览那个按钮
  // 先写发请求吧
  const preview = (record) => {
    // const data1=ref();
    // const previewToSurvey = async (params = { id: record.record.id }) => {
    //   // setLoading(true);
    //   try {
    //     dialogTableValue.value = await previewsurvey(params);
    //     console.log('这里这里这里');
    //     console.log(dialogTableValue.value);
    //   } finally {
    //     setLoading(false);
    //   }
    // };
    // previewToSurvey();
    useSurveyStore.$id = record.record.id;
    useSurveyStore().from = 1;
    router.push({ name: 'AnserQuestion' });
  };
  const copyId = ref('a');
  const act = (record) => {
    copyId.value = `访问地址：http://localhost:3000 \n
     您的问卷邀请码为：${record.record.id}`;
  };
  const release = (record) => {
    console.log(record.record);
    const input = document.createElement('input'); // js创建一个input输入框
    input.value = copyId.value; // 将需要复制的文本赋值到创建的input输入框中，this.ruleForm.url这个是我要复制的内容
    useSurveyStore.$id = record.record.id;
    useSurveyStore().from = 0;
    // router.push({
    //   name: 'AnserQuestion',
    // });
    Message.success('复制成功..');
    document.body.appendChild(input); // 将输入框暂时创建到实例里面
    input.select(); // 选中输入框中的内容
    document.execCommand('Copy'); // 执行复制操作
    document.body.removeChild(input); // 最后删除实例中临时创建的input输入框，完成复制操作
  };
</script>

<script lang="ts">
  export default {
    name: 'SearchTable',
  };
</script>

<style scoped lang="less">
  .container {
    padding: 0 20px 20px 20px;
  }

  :deep(.arco-table-th) {
    &:last-child {
      .arco-table-th-item-title {
        margin-left: 16px;
      }
    }
  }
</style>
